<template>
  <div>
    <a-card class="cardBox about">
      <div class="tit" slot="title">影视文化大脑</div>
      <div class="content">
        <div v-for="(item, i) in aboutData" :key="i">
          <span>{{ item.tit }}：</span>
          <p> {{ item.des }}</p>
        </div>
        <a @click="onClick">影视文化大脑驾驶舱</a>
      </div>
    </a-card>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard1',
    data () {
      return {
        aboutData: [
          { tit: '牵头单位', des: '中共金华市委 中共东阳市委' },
          { tit: '建设单位', des: '横店影视文化产业集聚区管委会' },
          { tit: '协同单位', des: '浙江省委宣传部、省广电局、金华市委宣传部、市委改革办、市经信局，东阳市委改革办、市经信局、市大数据中心等' },
          {
            tit: '场景简介',
            des: '影视文化大脑是全国影视文化领域具有开创性的重大集成应用，创新影视作品从剧本创作、剧组筹备、影视拍摄、后期制作、宣传发行、版权交易及开发的数字化全链条闭环，推动产业治理由经验判断向数据智能决策转变，是影视文化产业高质量发展创新尝试，在全国具有先行示范作用。'
          },
          { tit: '服务对象', des: '影视人员、政府部门、影视基地、影视文化相关企业' }
        ]
      }
    },
    methods: {
      onClick () {
        this.$emit('on-click')
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);

    .tit {
      position: relative;
      padding-left: 8px; font-size: 18px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .cardBox.about .tit::before {display: none}
  .about {
    .tit {
      text-align: center;
      font-weight: bold;
      font-size: 28px; padding-left: 0;
    }

    .content {
      div {
        display: flex;
        font-size: 18px; font-family: '微软雅黑';

        span {
          color: #1890ff;
          display: inline-block;
          width: 95px; font-weight: 500;
        }

        p {
          width: calc(100% - 100px); font-weight: bold;
        }
      }
      div:nth-child(3) {
        /*p { font-weight: initial}*/
      }

      a {
        float: right;
        font-size: 16px;
      }
    }
  }
</style>
